<!-- 地址编辑 -->
<template>
	<view class="address-edit">
		<uniForms class="form">
			<div class="group">
				<formListItem class="item" :label="'收货人'" :label-width="130" :type="'text'" placeholder="请输入收货人姓名" :value.sync="addressData.takeName"></formListItem>
				<formListItem class="item" :label="'联系电话'" :label-width="130" :type="'text'" placeholder="请输入收货手机号" :value.sync="addressData.iphone"></formListItem>
			</div>
			<div class="group">
				<formListItem
					class="item"
					placeholder="请选择收货区域"
					:label="'所在区域'"
					:label-width="130"
					:type="'multiSelector'"
					:picker-list="areaPickerList"
					:arrow-show="true"
					:value.sync="addressData.area"
					@change="areaPickerChange"
					@pickerChange="pickerWorkChange"
				></formListItem>
				<formListItem
					class="item"
					placeholder="请输入详细地址"
					:label="'详细地址'"
					:label-width="130"
					:maxlength="60"
					:type="'text'"
					:route-link="''"
					:arrow-show="true"
					:value.sync="addressData.address"
				></formListItem>
				<formListItem
					class="item"
					placeholder="每次下单默认使用该地址"
					:label="'默认地址'"
					:label-width="130"
					:type="'switch'"
					:value.sync="addressData.isDefault"
				></formListItem>
			</div>
		</uniForms>
		<button class="btn btn-yellow save-btn" @click="submitFrom">保存</button>
		<button class="btn btn-orange remove-btn" @click="removeOpen" v-if="id && id != ''">删除</button>
		<uni-popup ref="removePopup" type="center">
			<uni-popup-dialog
				mode="base"
				title="删除地址"
				content="确定要删除地址吗?"
				:duration="2000"
				:before-close="true"
				@close="removeClose"
				@confirm="removeAddress"
			></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
import uniForms from '@/components/uni-forms/uni-forms.vue';
import formListItem from '@/components/form-list-item/form-list-item.vue';
export default {
	components: {
		uniForms,
		formListItem
	},
	data() {
		return {
			id: '', //id
			addressData: {
				//地址数据
				id: '', //id
				takeName: '', //收货人
				iphone: '', //联系电话
				area: '', //所在区域
				isDefault: false, //是否默认地址
				address: '', //详细地址
				city: '', //城
				county: '', //区
				province: '' //省
			},
			areaPickerList: []
		};
	},
	computed: {
		// areaPickerList(){
		// 	return this.$store.state.addressModule.areaPickerList||[]
		// }
	},
	// watch:{
	// 	"$store.state.addressModule.editAddressFrom":function(newVal,oldVal){
	// 		console.log("地址表单数据变化",newVal)
	// 	}
	// },
	methods: {
		init() {
			// 初始化数据
			// this.getAreaPickerList();
		},
		verification() {
			// 验证
			if (!this.addressData.takeName || this.addressData.takeName == '') {
				uni.showToast({
					icon: 'none',
					mask: true,
					duration: 2000,
					title: '请输入收货人姓名！'
				});
				return false;
			} else if (!this.addressData.iphone || this.addressData.iphone == '') {
				uni.showToast({
					icon: 'none',
					mask: true,
					duration: 2000,
					title: '请输入收货手机号！'
				});
				return false;
			} else if (
				!this.addressData.city ||
				this.addressData.city == '' ||
				!this.addressData.county ||
				this.addressData.county == '' ||
				!this.addressData.province ||
				this.addressData.province == ''
			) {
				uni.showToast({
					icon: 'none',
					mask: true,
					duration: 2000,
					title: '请选择收货区域！'
				});
				return false;
			} else if (!this.addressData.address || this.addressData.address == '') {
				uni.showToast({
					icon: 'none',
					mask: true,
					duration: 2000,
					title: '请输入详细地址！'
				});
				return false;
			} else {
				return true;
			}
		},
		areaPickerChange(data) {
			// 区域选择改变
			console.log('区域选择改变', data);
			this.addressData.province = data[0];
			this.addressData.city = data[1];
			this.addressData.county = data[2];
		},
		pickerWorkChange(data) {
			// picker 交互值改变
			console.log('交互值改变', data);
			let province = data[0] || null;
			let city = data[1] || null;
			let county = data[2] || null;
			this.getAreaPickerList(province, city, county);
		},
		getAreaPickerList(province, city, county) {
			// 获取当前要用地区列表 （由于性能问题所以要分批加载）
			if (this.$store.state.addressModule.areaPickerList && this.$store.state.addressModule.areaPickerList.length > 0)
				this.areaPickerList = this.$store.state.addressModule.areaPickerList.map((provinceItem, provinceIndex) => {
					let result = {
						id: provinceItem.id,
						label: provinceItem.label,
						value: provinceItem.value,
						children: []
					};
					if ((province && provinceItem.value == province) || provinceIndex == 0)
						result.children = provinceItem.children.map((cityItem, cityIndex) => {
							if (city && cityItem.value == city) return cityItem;
							else if (cityIndex == 0) return cityItem;
							else
								return {
									id: cityItem.id,
									label: cityItem.label,
									value: cityItem.value,
									children: []
								};
						});

					return result;
				});
		},
		addAddress() {
			// 添加地址
			this.$store
				.dispatch('addAddressInfo', {
					takeName: this.addressData.takeName, //收货人
					iphone: this.addressData.iphone, //联系电话
					isDefault: this.addressData.isDefault, //是否默认地址
					address: this.addressData.address, //详细地址
					city: this.addressData.city, //城
					county: this.addressData.county, //区
					province: this.addressData.province //省
				})
				.then(res => {
					console.log('添加地址成功', res);
					setTimeout(() => {
						uni.showToast({
							mask: true,
							title: '添加地址成功！',
							duration: 2000
						});
					}, 500);

					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						});
					}, 2000);
				});
		},
		editAddress() {
			// 编辑地址
			this.$store
				.dispatch('editAddressInfo', {
					id: this.addressData.id, //id
					takeName: this.addressData.takeName, //收货人
					iphone: this.addressData.iphone, //联系电话
					isDefault: this.addressData.isDefault, //是否默认地址
					address: this.addressData.address, //详细地址
					city: this.addressData.city, //城
					county: this.addressData.county, //区
					province: this.addressData.province //省
				})
				.then(res => {
					console.log('编辑地址成功', res);
					setTimeout(() => {
						uni.showToast({
							mask: true,
							title: '编辑地址成功！',
							duration: 2000
						});
					}, 500);

					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						});
					}, 2000);
				});
		},
		submitFrom() {
			// 提交表单
			if (this.verification()) {
				if (this.id || this.id != '') this.editAddress();
				else this.addAddress();
			}
		},
		removeOpen() {
			// 删除地址 弹出
			this.$refs.removePopup.open();
			console.log('打开窗口');
		},
		removeClose(done) {
			// TODO 做一些其他的事情，before-close 为true的情况下，手动执行 done 才会关闭对话框
			console.log('关闭');
			done();
		},
		removeAddress(done) {
			// 删除地址
			this.$store
				.dispatch('removeAddress', {
					id: this.id
				})
				.then(res => {
					console.log('删除地址成功', res);
					
					setTimeout(()=>{
						uni.showToast({
							mask: true,
							title: '删除成功！',
							duration: 2000
						});
					},500)
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						});
					}, 2000);
				});
			done();
		}
	},
	onLoad(option) {
		console.log('配置', option);
		if (option && option.id) {
			let name = option.id;
			this.id = parseInt(option.id);
			uni.setNavigationBarTitle({
				title: '编辑收货地址'
				// title: '编辑收货地址-'+ name
			});
			let addressList = this.$store.state.addressModule.addressList;
			let actAddress = this.$Lodash.find(addressList, { id: this.id });
			this.addressData = {
				//地址数据
				id: actAddress.id, //id
				takeName: actAddress.takeName, //收货人
				iphone: actAddress.iphone, //联系电话
				area: [actAddress.province, actAddress.city, actAddress.county], //所在区域
				isDefault: actAddress.isDefault ? true : false, //是否默认地址
				address: actAddress.address, //详细地址
				city: actAddress.city, //城
				county: actAddress.county, //区
				province: actAddress.province //省
			};
			this.getAreaPickerList(actAddress.province, actAddress.city, actAddress.county);
		} else {
			this.getAreaPickerList();
			uni.setNavigationBarTitle({
				title: '添加收货地址'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.address-edit {
	width: 100%;

	.form {
		width: 100%;
		box-sizing: border-box;
		.group:nth-last-child(n + 2) {
			margin-bottom: 26rpx;
		}
		.item {
			display: flex;
			width: 100%;
			padding: 0rpx 20rpx;
			background-color: #fff;
			box-sizing: border-box;
		}
		.item:nth-child(1) {
			border-radius: 8px 8px 0px 0px;
		}
		.item:nth-last-child(1) {
			border-radius: 0px 0px 8px 8px;
		}
		.item:nth-last-child(n + 2) {
			border-bottom: 2rpx solid #efeff0;
		}
	}
	.save-btn {
		display: block;
		width: 90%;
		font-size: 30rpx;
		padding: 14rpx 0rpx;
		margin: auto;
		margin-top: 150rpx;
	}
	.remove-btn {
		display: block;
		width: 90%;
		font-size: 30rpx;
		padding: 14rpx 0rpx;
		margin: auto;
		margin-top: 20rpx;
	}
}
</style>
